<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>伸缩菜单</title>
        <link rel="stylesheet" href="./style.css">
        <link rel="stylesheet" href="../public/iconfont.css">
    </head>

    <body>
        <div class="container-outer">
            <div class="container-inner">
                <div class="metainfo  container-item">
                    <div class="averge">
                        <img src="../public/img/5.jpg" alt="">
                    </div>
                    <section id="metainfo">
                        <p class="name">张三</p>
                        <h2 class="otherinfo">前端工程师</h2>
                    </section>
                </div>

                <i class="line"></i>

                <div class="menu container-item" name="menu">
                    <p>导航</p>
                    <div class="menu-item">
                        <div class="icon"><span class="iconfont icon-wenjian"></span></div>
                        <div class="menu-metainfo">
                            <div class="icon-info">文件</div>
                            <div class="icon-icon"></div>
                        </div>
                    </div>
                    <div class="menu-item">
                        <div class="icon"><span class="iconfont icon-xiaoxi"></span></div>
                        <div class="menu-metainfo">
                            <div class="icon-info">消息</div>
                            <div class="icon-icon"></div>
                        </div>
                    </div>
                    <div class="menu-item">
                        <div class="icon"><span class="iconfont icon-shipin"></span></div>
                        <div class="menu-metainfo">
                            <div class="icon-info">视频</div>
                            <div class="icon-icon"></div>
                        </div>
                    </div>
                    <div class="menu-item">
                        <div class="icon"><span class="iconfont icon-youxiang"></span></div>
                        <div class="menu-metainfo">
                            <div class="icon-info">邮箱</div>
                            <div class="icon-icon"></div>
                        </div>
                    </div>
                </div>

                <i class="line"></i>

                <div class="menu container-item" name="server">
                    <p>服务</p>
                    <div class="menu-item">
                        <div class="icon"><span class="iconfont icon-gengduo"></span></div>
                        <div class="menu-metainfo">
                            <div class="icon-info">更多</div>
                            <div class="icon-icon"></div>
                        </div>
                    </div>
                    <div class="menu-item">
                        <div class="icon"><span class="iconfont icon-sousuobeifen2"></span></div>
                        <div class="menu-metainfo">
                            <div class="icon-info">搜索</div>
                            <div class="icon-icon"></div>
                        </div>
                    </div>
                    <div class="menu-item">
                        <div class="icon"><span class="iconfont icon-shezhi"></span></div>
                        <div class="menu-metainfo">
                            <div class="icon-info">设置</div>
                            <div class="icon-icon"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>

</html>